<!DOCTYPE html>
<html>
<head>
    <title>CSS加载动画</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #f3f6f9;
            font-family: sans-serif;
            font-weight: 100;
            font-size: 14px;
            margin: 0;
            padding: 20px;
        }
        .grid {
            overflow: hidden;
        }

        .cell {
            float: left;
            width: 25%;
            box-sizing: border-box;
            padding: 20px;
            display: table;
        }

        .card {
            background: white;
            border: 1px solid #c3c6cf;
            border-radius: 15px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            height: 200px;
        }
    </style>
    <script>
        window.hdjs = {};
        window.hdjs.base = '../';
        window.hdjs.uploader = 'php/uploader.php?';
        window.hdjs.filesLists = 'php/filesLists.php?';
    </script>
    <script src="../require.js"></script>
    <script src="../config.js"></script>
</head>
<body>
<script>
    require(['hdjs'],function(hdjs){
        hdjs.spinners();
    })
</script>
<!--<div id="loading-css-hdjs" style="width: 100%;top:0;right:0;bottom:0;left:0;text-align: center;position: absolute;padding-top:20%;background: rgba(255,255,255,0.6);z-index: 9999;">-->
    <!--<span class="spinner-loader">Loading&#8230;</span>-->
<!--</div>-->
<div class="grid">
    <div class="cell">
        <div class="card">
            <span class="spinner-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="throbber-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="refreshing-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="heartbeat-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="gauge-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="timer-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="three-quarters-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="wobblebar-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="atebits-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="whirly-loader">Loading&#8230;</span>
        </div>
    </div>
    <div class="cell">
        <div class="card">
            <span class="flower-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="dots-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="circles-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="plus-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="ball-loader">Loading&#8230;</span>
        </div>
    </div>

    <div class="cell">
        <div class="card">
            <span class="hexdots-loader">Loading&#8230;</span>
        </div>
    </div>
</div>
</body>
</html>
